<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=10"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>微课资源库</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/underscore.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部banner搜索框-->
<div class="head">
    <div class="bj">
        <div class="right">
            <h1>
                墨玉县职业中等学校微课资源平台
            </h1>
            <h3>
                互联网+教育、在线课堂知识重点难点全面剖析
            </h3>
            <div class="search">
                <input type="text" name="text" id="search" placeholder="请输入需要搜索内容" onkeydown="entersearch()">
                <i class="icon-search"></i>
            </div>
            <div class="hot-list">
                <h5>热门搜索：</h5>
                <ul>
                    <li><a href="#"> 电子商务</a></li>
                    <li><a href="#"> 商务法语</a></li>
                    <li><a href="#"> 市场营销</a></li>
                    <li><a href="#"> 专业英语</a></li>
                    <li><a href="#"> 农林种植</a></li>
                    <li><a href="#"> 花卉养殖</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>
<!--主内容区-->
<div class="zt_main">
    <!--左侧栏-->
    <div class="left_main" id="left">
        <div class="main">
            <h2>专业目录</h2>
            <div class="gl">
                <ul class="geng" id="shows">
                  
                </ul>
                <span class="icon-pointer" id="icons"></span>
                <!-- <ul class="geng" id="hide">
                </ul> -->
            </div>
        </div>
    </div>
    <!--中间视频区-->
    <div class="center" id="center">
        <div class="list" id="tab2">
            <div class="tit ">
                <h5 class="clearfix">热搜课程</h5>
            </div>
            <ul class="clearfix">
                <li style="border: 1px solid #e1d9ce;">
                    <a class="photo" href="videoPlay.html" onclick="loadpages('video_details.jsp','12')"> <img
                            src="./images/pic2_10.png"></a><b>环境与艺术设计</b><u><i>admin</i><strong>20看过</strong></u>
                </li>
                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','13')"> <img
                        src="./images/pic3_12.png"></a><b>市场营销</b><u><i>admin</i><strong>19看过</strong></u>
                </li>
                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','18')"> <img
                        src="./images/pic4_17.png"></a><b>计算机组成原理</b><u><i>admin</i><strong>0看过</strong></u>
                </li>

                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','20')"> <img
                        src="./images/pic5_18.png"></a><b>商务法语</b><u><i>admin</i><strong>0看过</strong></u>
                </li>

                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','21')"> <img
                        src="./images/pic6_19.png"></a><b>会计实务</b><u><i>admin</i><strong>4看过</strong></u>
                </li>

                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','22')"> <img
                        src="./images/pic7_23.png"></a><b>商务洽谈</b><u><i>admin</i><strong>3看过</strong></u>
                </li>

                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','23')"> <img
                        src="./images/pic9_25.png"></a><b>动漫制作</b><u><i>admin</i><strong>0看过</strong></u>
                </li>
                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','23')"> <img
                        src="./images/pic_08.png"></a><b>运营理念</b><u><i>admin</i><strong>0看过</strong></u>
                </li>
                <li style="border: 1px solid #e1d9ce;"><a class="photo" href="videoPlay.html"
                                                          onclick="loadpages('video_details.jsp','23')"> <img
                        src="./images/pic7_24.png"></a><b>市场营销</b><u><i>admin</i><strong>0看过</strong></u>
                </li>
            </ul>
            <div class="right">
                <h4>热门推荐</h4>

                <div class="tj">
                    <div class="tj_one">
                        <span class="hot">1</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','12')">商务法语</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span class="hot">2</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','13')">电子信息与技术</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span class="hot">3</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','5')">数字广播电视技术</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>4</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','19')">工程潜水</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>5</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','6')">飞机维修</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>6</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','21')">人口与计划生育管理</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>7</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','16')">会计电算化</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>8</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','22')">酒店服务管理</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>9</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','7')">网页美术设计</a>
                    </div>
                </div>

                <div class="tj">
                    <div class="tj_one">
                        <span>10</span>
                        <a style="cursor: pointer;" onclick="loadpages('video_details.jsp','8')">民族美术</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--页脚区域-->
<div class="footer">
    <p>新疆朝阳商用数据有限公司</p>
    <p><span>电话:</span><span>0991-8569235</span> <span>E-mail:</span><span>53228788@qq.com</span></p>

</div>
<script>
    $(document).ready(function () {
        $.ajax({
            type : "GET",
            url : "/admin/getClassLists",
            dataType : "JSON",
            data : {},
            success : function(data){
                var liString="";
                var beanList = data;            //返回的json数据
                if(beanList){                   //判断
                    for(var i=0; i<beanList.length; i++){ //遍历，动态赋值
                        liString +="<li class=\"one\" name=\""+beanList[i].cid+"\"";
                        liString += ">"+"<span>"+beanList[i].cname+"<a style=\"float: right;\">&gt;</a>"+"</li>";
                          }  $("#shows").append(liString);  // 为当前name为asd的select添加数据。
    
                          var a=$("#shows .one").length;
                          console.log(a);
                          var hide=10;
                          $("#shows .one").each(function(index){
                               if(index>hide){
                                   $(this).addClass("fik");
                               }
                               $("#icons").click(function () {
                                if(index<hide){
                                   $(this).removeClass("fik");
                               }
                               else{
                                $(this).addClass("fik");
                               }                                                               });
                          })
                }
            }
        })
    
        $("#icons").click(function () {
            $(this).toggleClass("drow-up");
            $("#hide").toggle().toggleClass("geng").toggleClass("gods");
            $("#shows").toggleClass("geng").toggleClass("gods");
        });
        $(".main .geng .zl .one ").mouseover(function () {
            $(this).addClass("hover").siblings().removeClass("hover")
        });
        $(".main .geng .zl  ").mouseout(function () {
            $(this).children($(".one")).removeClass("hover")
        });
        $(".main .geng .one ").mouseover(function () {
            $(this).addClass("hover").siblings().removeClass("hover");
        });
        $(".main .gods .one ").mouseover(function () {
            $(this).addClass("hover").siblings().removeClass("hover");
        });
        $(".main .geng ").mouseout(function () {
            $(this).children($(".one")).removeClass("hover")
        });
        $(".main .gods .zl .one ").mouseover(function () {
            $(this).addClass("hover").siblings().removeClass("hover")
        });
        $(".main .gods .zl  ").mouseout(function () {
            $(this).children($(".one")).removeClass("hover")
        });
        $(".main .gods ").mouseout(function () {
            $(this).children($(".one")).removeClass("hover")
        });
    
    })
</script>
</body>
</html>